Typography

Headings

Headings communicate the organization of the content on the page and should be used in the correct order for assistive technology. Headings should not be skipped, instead use the correct heading tag and apply a class to override default styles when needed.

View

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Blockquote

The blockquote element is used to indicate the quotation of text from another source.

View

“We continue to invest in faculty, staff and innovative programs to ensure that students at Georgia's flagship university have an unparalleled learning experience.”

- UGA President Jere W. Morehead.

HTML

<blockquote>
  <p>“We continue to invest in faculty, staff and innovative programs to ensure that students at Georgia's flagship university have an unparalleled learning experience.”</p>
  <p>- UGA President Jere W. Morehead.</p>
</blockquote>

Paragraph

If you would like to use these paragraph styles on different elements see the defaults component.

View

It is the process of displacement which is chiefly responsible for our being unable to discover or recognize the dream-thoughts in the dream-content, unless we understand the reason for their distortion. It is the process of displacement which is chiefly responsible for our being unable to discover or recognize the dream-thoughts in the dream-content, unless we understand the reason for their distortion.

HTML

<p>It is the process of displacement which is chiefly responsible for our being unable to discover or recognize the dream-thoughts in the dream-content, unless we understand the reason for their distortion. It is the process of displacement which is chiefly responsible for our being unable to discover or recognize the dream-thoughts in the dream-content, unless we understand the reason for their distortion.</p>

Link

A link navigates the user to a new resource. If classes are applied to this link element, it will not receive these styles. Here you can read about when to use a button or a link.

View

Click Me

HTML

<a href="#">Click Me</a>

List (ordered)

The <ol> tag defines an ordered list. We use ordered list for when we want to list items in numerical order. Use the <li> tag to define list items. You can change the list type (i.e, Upper Alpha) using the ordered list utility classes. See the Utilities documentation for more information.

View

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Quisque viverra a ex at semper
  4. Cras sagittis elit vel porta vehicula

HTML

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Quisque viverra a ex at semper</li>
  <li>Cras sagittis elit vel porta vehicula</li>
</ol>

List (unordered)

The <ul> tag defines an unordered list. We use unordered list for bulleted list items. Use the <li> tag to define list items.

View

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Quisque viverra a ex at semper
  • Cras sagittis elit vel porta vehicula

HTML

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Quisque viverra a ex at semper</li>
  <li>Cras sagittis elit vel porta vehicula</li>
</ul>